// 不建议用interface，因为后面组合的时候会很麻烦
export type BaseBlock ={
    id:string,
    type:string
}

export type TextBlock=BaseBlock & {
    type:"text",
    props:{
        content:string
    },
    actions?:{                      //将actions指定为可选
        onCopy:()=>void
        onEdit:()=>void
    }
}

export type ChartBlock=BaseBlock & {
    type:"chart",
    props:{
        // data:Array<number>,
        // labels:Array<string>
    },
    actions:{
        onFilter:()=>void
        onSwitch:()=>void
    }
}

export type ImageBlock = BaseBlock & {
    type:"image",
    props:{
        src:string,
        alt?:string,
    },
    actions:{
        // onDownload:()=>void
        onEdit:()=>void
    }
}
// 这样写的好处是
export type Block = TextBlock|ChartBlock|ImageBlock

// 好处一：类型保护，推导
/* const b:Block={
    type:"text",
    id:"1",
    props:{
        content:"hello"
    },
    actions:{
        onCopy:()=>{},
        onEdit:()=>{}
    }

}

if(b.type==="text"){
    b.props.content=...
}else if(b.type==="image"){
    b.props.src=...
} */


// 类型保护，推导方式怎么写呢？
/* const b:Block={
    id:'1',
    type:'image',
    props:{
        src:"https://www.baidu.com"
    },
    actions:{
        onEdit:()=>{}
    }
}
const isImage = (block:Block):block is ImageBlock => {
    return block.type === "image"
}
if(b!==null){
    if(isImage(b)){
        b.props.src=...
    }
} */